<template>
<div class="logbg">
  <div class="log-logo"><img src="~@/assets/images/logo.png"/></div>
  <div class="kg-log-bg">
    <div class="kg-logo-bg-title">欢迎登录</div>
    <a-form
    :model="formState"
    name="normal_login"
    class="kg-log-ul"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item 
      name="user_name"
      :rules="[{ required: true, message: '请输入姓名!' }]"
    >
      <a-input v-model:value="formState.user_name"  placeholder="请输入姓名">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      name="password"
      :rules="[{ required: true, message: '请输入身份证号!' }]"
    >
      <a-input v-model:value="formState.password"  placeholder="请输入身份证号">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item class="kg-log-lia">
      <a-form-item name="remember" no-style>
        <a-checkbox v-model:checked="formState.remember">记住登录状态</a-checkbox>
      </a-form-item>
      <router-link to="/passport/reg"><i class="micon">&#xe683;</i>注 册</router-link>
    </a-form-item> 

    <a-form-item>
      <a-button :disabled="disabled" class="but-a" type="primary" html-type="submit">登 录</a-button>
    </a-form-item>
  </a-form>

  </div>
</div>
</template>
<script>

import { defineComponent, reactive, computed } from 'vue';
import { useStore } from 'vuex'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import message from 'ant-design-vue/es/message'
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const store = useStore();
    const route = useRouter()
    const formState = reactive({
      user_name: '',
      password: '',
      remember: true,
    });
    
    const onFinish = values => {
      store.dispatch('Login', values).then((result)=>{
        loginSuccess(result)
      }).finally((err)=>{
         this.loginFailed(err)
      });
		 
    };
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    
    const loginSuccess=values=>{
      // let path = route.currentRoute.value.query.redirect;
      route.push('/index');
      message.success(values.message, 1.5)

    }
    const disabled = computed(() => {
      return !(formState.user_name && formState.password);
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },
  methods: {
    
  }
});
</script>

<style scoped>
.logbg{background: url(@/assets/images/bge.jpg) top center/100% auto no-repeat #f3f0e9;}
::v-deep .ant-input-affix-wrapper{width: 100%; height:1.04rem; line-height: 1;border-radius: 0.52rem; background: #e6e6e6; border: none;}
::v-deep .ant-input{background: none;}
::v-deep .ant-btn-primary{border:none; background: #332fab; text-shadow:none; box-shadow:0 5px 10px rgba(21, 29, 194,.35);}
::v-deep .ant-btn{line-height: 1.066667rem; padding: 0; color: #fff;}
::v-deep .ant-btn-primary[disabled], ::v-deep .ant-btn-primary[disabled]:hover, ::v-deep .ant-btn-primary[disabled]:focus, ::v-deep .ant-btn-primary[disabled]:active{}
</style>